<!--  -->
<template>
  <div class=''>
    <el-carousel :interval="5000" height="540px">
      <el-carousel-item class="carousel" v-for="(item, index) in banner" :key="index">
        <el-image fit="cover" :src="item.img" @click="linkTo(item.href)" style="cursor: pointer;"></el-image>
      </el-carousel-item>
    </el-carousel>
    <!-- 导图 -->
    <section v-if="map">
      <div class="fullW map wow bounceInRight" data-wow-duration="1s" data-wow-delay="0.5s">
        <img :src="map" class="img">
      </div>
    </section>
    <!-- 核心功能 -->
    <section v-if="core" class="sectionBg">
      <div class="fullW">
        <div class="globalTitle">
          <div class="title">{{ core.title }}</div>
          <div class="subTitle" v-if="core.subTitle">{{ core.subTitle }}</div>
        </div>
        <div class="core">
          <el-row :gutter="24">
            <el-col :span="6" v-for="(item, index) in core.list" :key="index">
              <div class="item wow fadeInUpBig" :data-wow-duration="0.3 * index + 's'" data-wow-delay="0.5s">
                <img :src="item.img" class="img">
                <div class="name">{{ item.name }}</div>
                <div class="text">{{ item.text }}</div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </section>

    <!-- 其他 -->
    <section v-for="(item, index) in other" :class="{ sectionBg: item.isBg }">
      <div class="fullW">
        <div class="other" :class="item.direction">
          <img v-if="item.direction === 'right' && item.img" :src="item.img" class="img wow bounceInLeft"
            data-wow-duration="1s" data-wow-delay="0.5s">
          <div class="wrapper-text wow" :class="item.direction === 'right' ? 'bounceInRight' : 'bounceInLeft'"
            data-wow-duration="1s" data-wow-delay="0.5s">
            <div class="name">{{ item.name }}</div>
            <div class="text" v-html="item.text"></div>
            <el-button v-waves class="large" type="primary" v-if="item.button" @click="linkTo(item.button.href)">{{
              item.button.name }}</el-button>
          </div>
          <img v-if="['left', 'top'].includes(item.direction) && item.img" :src="item.img" class="img wow bounceInRight"
            data-wow-duration="1s" data-wow-delay="0.5s">
        </div>
      </div>
    </section>

    <!-- 体验DEMO -->
    <experience />
  </div>
</template>

<script>
// import oms from '@/static/data/oms.json'
// import wms from '@/static/data/wms.json'
// import tms from '@/static/data/tms.json'
import WOW from 'wowjs';
import { ALI_API } from '@/utils'
export default {
  async asyncData({ app, error, store,params }) {
    const response = await fetch(`${ALI_API}/kyb_office/${params.id}.json`)
    return await response.json()
  },
  mounted() {
    let wow = new WOW.WOW({
      boxClass: 'wow',
      animateClass: 'animated',
      offset: 0,
      mobile: true,
      live: true
    });
    wow.init();
  },
  methods: {
    linkTo(href) {
      if (href) {
        if (href.startsWith('http')) {
          window.open(href)
        } else {
          this.$router.push(href);
        }
      }
    }
  }
}
</script>
<style lang='scss' scoped>
@import '@/assets/css/variables.scss';

.carousel {
  background-color: #fff;
  display: flex;
  justify-content: center;
  min-width: $use-fullW;
}

::v-deep(.el-carousel) {
  .el-carousel__arrow--left {
    left: calc(50% - 600px) !important;
  }

  .el-carousel__arrow--right {
    right: calc(50% - 600px) !important;
  }
}

.map {
  padding: 100px 0;
  text-align: center;

  .img {
    max-width: 100%;
  }
}

.core {
  overflow: hidden;
  margin-bottom: 76px;
  display: inline-block;
  width: 100%;

  .item {
    height: 252px;
    border-radius: 8px;
    padding: 32px 24px;
    background-color: #fff;
    margin-bottom: 24px;

    .img {
      height: 64px;
    }

    .name {
      height: 30px;
      font-size: 22px;
      font-weight: 600;
      margin: 16px 0;
    }

    .text {
      line-height: 22px;
      color: $use-color-info-light-3;
    }
  }
}

.other {
  padding: 100px 0;
  display: flex;

  &.top {
    flex-direction: column;

    .wrapper-text {
      width: auto;
    }

    .img {
      margin-top: 48px;
      max-width: 100%;
    }
  }

  &.left,
  &.right {
    justify-content: space-between;
    align-items: center;

    .img {
      max-width: 680px;
    }
  }

  .wrapper-text {
    width: 435px;

    .name {
      font-size: 36px;
      font-weight: 600;
    }

    .text {
      margin-top: 32px;
      color: $use-color-info-light-2;
      line-height: 30px;
      white-space: pre-wrap;
      font-size: 18px;
    }

    .el-button {
      margin-top: 48px;
    }
  }

}</style>
